Cloudinaryのライブストリーミング（ベータ版）を試してみる

#Cloudinary

#動画配信

森亮介

2020.10.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudinaryは、アップロード、ストレージ、管理、操作、最適化、配信など、画像と動画のエンドツーエンドのメディア管理を提供するクラウドベースのサービスですが、アップロードされたメディアだけでなく、エンドツーエンドのライブビデオストリーミングソリューションも提供されています。現在はベータ版となっていますが、実際にどんなものなのか試してみようと思います。

現在はJavaScriptライブラリ: cloudinary-js-streamingが提供されているようです。

ビデオはユーザーのデバイスカメラからストリーミングされます。
ビデオはCloudinaryを介してアップストリームされ（事前構成された変換とエフェクトを含む）、ストリーミングユーザーにCloudinaryパブリックIDとリソースURLを提供します。
ストリームはそのURLを通じて公開され、ストリーミングがサポートされているビデオプレーヤーにフィードできます。

このような流れとなります。

セットアップ

ライブラリのインストール

任意のディレクトリで

npm install @cloudinary/js-streaming

を実行します。

npmを使わずにHTMLに直接ロードすることも可能です。

<script src="https://unpkg.com/@cloudinary/js-streaming/dist/js-streaming.js"></script>

をhtmlファイルに追加します。

今回はこの方法を使います。

新しいライブストリーミングアップロードプリセットを作成

Cloudinaryのコンソールにログインし、新しい署名されていないアップロードプリセットを作成します。

Settings->Uploadの Upload presetsセクションで行います。

Upload presetsの作成時、Storage and Accessの設定のLive broadcastをONにします・

プリセットの作成で以下のように表示されます。

Cloudinary構成パラメーターを設定

HTMLから読み込むjavascriptファイルを作成し、

const cloudName = "{your-cloud-name}";
const uploadPreset = "{your-upload-preset}";

を追加します。

cloudNameはCloudinaryのダッシュボードから確認できます。

uploadPresetは先ほど作ったプリセット名を設定します。

ライブストリーミングの初期化

initLiveStream(options)メソッドを使ってライブストリーミングを初期化します。

必須

Param	Type	Description
cloudName	String	Cloudinaryアカウントのクラウド名
uploadPreset	String	\|「ライブブロードキャスト」対応のアップロードプリセット

オプション

Param	Type	Description
debug	String or Array	ログレベル（デフォルトでは無効）。印刷するメッセージのタイプをリストする文字列または文字列の配列。可能な値は trace、debug、vdebug、log、warn、error、all
bandwidth	String	ビット単位のストリーミング帯域幅。デフォルトは1Mbit / s（1024 * 1024）
hlsTarget	Boolean	hlsプロトコルを使用してライブストリーミングするかどうか
fileTarget	Boolean	loudinaryメディアライブラリにmp4ファイルを保存するかどうか
facebookUri	String	ストリームをFacebookに転送するために使用されるFacebookストリーミングURI
youtubeUri	String	ストリームをYoutubeに転送するために使用されるYoutubeストリーミングURI
events	Callback	次の機能をサポートするイベントのコールバック `start`::ストリーミングの開始時に呼び出されます。録音IDが含まれます。 `stop`：ストリーミングが停止したときに呼び出されます。録音IDが含まれます。 `error`：ライブラリでエラーが発生したときに呼び出されます。エラーメッセージはコールバックに含まれています。 `local_stream`：ストリームがローカルで利用可能になったときに呼び出されます（ストリームはコールバックで提供されます）。これを使用して、アップストリーム時に自分のストリーミングをユーザーに表示できます。

例えば、以下のようなコードになります。

initLiveStream({
    cloudName: cloudName,
    uploadPreset: uploadPreset,
    debug: "all",
    hlsTarget: true,
    fileTarget: false,
    events: {
        start: function (args) {
            // user code
            console.log("start stream");
            liveStream.start("<public-id>")
        },
        stop: function (args) {
            // user code
            console.log("stop stream");
            liveStream.stop()
        },
        error: function(error){
            // user code
            console.log("err stream");
        },
        local_stream: function (stream) {
            // user code, typically attaching the stream to a video view:
            console.log("attaching the stream to a video view");
            liveStream.attach(document.getElementById("video"), stream);
        }
    }
}).then(result => {
    
})

initializeを実行したら、以下のような内容が返却されます

{
    "public_id": "zeotgizr0ywj9w8owms7",
    "version": 1579706079,
    "signature": "2f25a24948aaf35e9c357355893978f5aa880dda",
    "format": "live",
    "resource_type": "video",
    "created_at": "2020-01-22T15:14:39Z",
    "tags": [],
    "bytes": 87,
    "type": "upload",
    "placeholder": false,
    "url": "http://res.cloudinary.com/mycloudname/video/upload/v1579706079/zeotgizr0ywj9w8owms7.live",
    "secure_url": "https://res.cloudinary.com/mycloudname/video/upload/v1579706079/zeotgizr0ywj9w8owms7.live",
    "access_mode": "public",
    "original_filename": "blob"
}

events個々の内容

liveStream.attach(document.getElementById("video"), stream);

ライブストリームをビデオ要素に添付して、ストリーミングしているユーザーにローカルストリームを表示します。配信映像を自分でも確認できます。

liveStream.start("<public-id>");

ライブストリーミングを開始する命令です。

<public-id>はinitLiveStreamを実行した時に帰ってくる値です。

liveStream.stop();

ライブストリーミングを停止する命令です。

カメラ制御

いくつかの便利なカメラ機能を利用して、ユーザーがライブストリームを初期化する前にデバイスのカメラをプレビューできるようにすることが可能です。

attachCamera(<video-element>, facingMode)

HTMLビデオ要素でカメラを表示.

detachCamera(<video-element>, stopStream)

HTMLビデオ要素からカメラを削除。

例えば、以下のようなコードになります

import {attachCamera, detachCamera} from '@cloudinary/js-streaming';
const video = document.getElementById("video");
const facingMode =  { exact: "user" };

// Show camera in an html <video> element
// facingMode is optional
attachCamera(video, facingMode).then(stream=>console.log(stream));

// Remove camera from an html <video> element
detachCamera(video).then(videoElement=>console.log(videoElement));

Streamerというカメラとライブストリーミングの両方の機能を使用できるようになるラッパーもあります。詳しくはドキュメントをご参照ください。